<script setup lang="ts">
const [setEle, eleBp] = useElementBreakpoint();

const links = computed(() => [
  {
    label: $t('dfEwxZdElzXDjUXjasPt'),
    icon: 'i-local:edit?mask',
    to: { name: RN.REFERRAL_DASHBOARD },
  },
  {
    label: $t('a8oFpMgJEt44Prvp6GqAf'),
    icon: 'i-local:privacy?mask',
    to: { name: RN.REFERRAL_CAMPAIGNS },
  },
  {
    label: $t('oshxHyHaHizfpl8N8y2In'),
    icon: 'i-local:mail?mask',
    to: { name: RN.REFERRAL_REFERRALS },
  },
]);
</script>

<template>
  <div :ref="setEle" class="grid page-content-w items-start gap-3" u:laptop="grid-cols-[auto_1fr] gap-3 py-6">
    <div class="col-span-full flex-between text-xl">
      <span>{{ $t('2AoKheXrg22ukuBav7wY') }}</span>
      <div>
        <div class="flex-center cursor-pointer rounded-2 bg-sys-layer-e px-3 py-1 lt-tabletl:px-1" @click="$router.push({ name: RN.REFERRAL_ABOUT })">
          <i class="i-local:vector mr3 text-4 lt-tabletl:mr-1" />
          <span class="text-3 text-sys-text-ter"> {{ $t('kfhZaHr7E7Ojls0_2byTi') }}</span>
        </div>
      </div>
    </div>

    <TRouterLinks :mode="$bp.laptop ? 'vertical' : 'horizontal'" :links="links" :showIcon="eleBp.xl" />

    <RouterView />
  </div>
</template>
